<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-04-03 11:18:58
-->
<route lang="json5" type="home">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '储能系统分布',
    disableScroll: false,
  },
}
</route>
<template>
  <view class="energyStorage">
    <uv-navbar title="" leftIconColor="#fff" @leftClick="backBox" bgColor="#226CFF">
      <template v-slot:left>
        <view class="uv-nav-slot flex">
          <uv-icon name="arrow-left" size="19" color="#fff"></uv-icon>
          <uv-input
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            v-model="search"
            :customStyle="styles"
            placeholder="搜索设备编号"
            @change="change"
          ></uv-input>
        </view>
      </template>
    </uv-navbar>
    <map
      id="map"
      class="map"
      :show-location="true"
      :latitude="tude.latitude"
      :longitude="tude.longitude"
    >
      <!-- :markers="covers" -->
      <cover-view
        class="mapCoverBottom"
        v-show="isDetail"
        :style="{
          top: coverTop + 'px',
          paddingBottom: safeAreaInsets.bottom ? safeAreaInsets.bottom : 40 + 'px',
        }"
      >
        <cover-view
          class="mouseMove"
          @touchmove="handleTouchMove"
          @touchstart="handleTouchStart"
        ></cover-view>
        <cover-view class="tipsBox"></cover-view>

        <cover-view class="flex">
          <cover-view class="item">
            <cover-image class="image" :src="dc2"></cover-image>
            <cover-view class="font-size-[37rpx] mt-3">1,457 </cover-view>
            <cover-view>区域内电池</cover-view></cover-view
          >
          <cover-view class="item">
            <cover-image class="image" :src="sb"></cover-image>
            <cover-view class="font-size-[37rpx] mt-3">6,584</cover-view>
            <cover-view>在线数量</cover-view></cover-view
          >
          <cover-view class="item">
            <cover-image class="image" :src="xl"></cover-image>
            <cover-view class="font-size-[37rpx] mt-3">83%</cover-view>
            <cover-view>在线率</cover-view></cover-view
          >
        </cover-view>
        <cover-view class="listBox pl-[30rpx] mt-3">
          <cover-view
            v-for="(item, i) in 5"
            :key="i"
            class="flex listItem mb-3"
            @click="isDetail = false"
          >
            <cover-view>
              <cover-view class="font-size-[30rpx] color-[#354970] pb-3"
                >设备编号：XG2409006</cover-view
              >
              <cover-view>浙江省杭州市江于区白杨街道1103号</cover-view>
            </cover-view>
            <cover-image class="image" :src="icon_distribution_of_ess"></cover-image>
          </cover-view>
        </cover-view>
      </cover-view>

      <cover-view
        class="mapCoverDetail"
        :style="{ paddingBottom: safeAreaInsets.bottom + 40 + 'rpx' }"
        v-show="!isDetail"
      >
        <cover-view class="close" @click="isDetail = true">
          <cover-view class="close1"></cover-view>
          <cover-view class="close2"></cover-view>
        </cover-view>
        <cover-view class="title">设备编号：XG2409006</cover-view>
        <cover-view class="tips flex">
          <cover-image class="image" :src="icon_distribution_of_ess"></cover-image>
          浙江省杭州市江于区白杨街道1103号
        </cover-view>
        <cover-view class="btn">查看详情</cover-view>
      </cover-view>
    </map>
  </view>
</template>

<script setup lang="ts" name="energyStorage">
const { safeAreaInsets, windowHeight } = uni.getSystemInfoSync()
import dc2 from '@/static/images/icon/dc2.png'
import xl from '@/static/images/icon/xl.png'
import sb from '@/static/images/icon/sb.png'
import icon_distribution_of_ess from '@/static/images/icon/icon_distribution_of_ess@2x.png'
const search = ref('')
const change = (e) => {
  console.log(e, 123)
}
const isDetail = ref(true)
const tude = ref({
  latitude: 39.909,
  longitude: 116.39742,
})
const coverTop = ref<string | number>(0)
onMounted(() => {
  coverTop.value = windowHeight - safeAreaInsets.bottom - 280
  uni.getLocation({
    type: 'wgs84',
    success: function (res) {
      console.log('当前位置信息：', res)
      tude.value = res
    },
    complete: function (res) {
      console.log(res, 'res')
    },
  })
})

// const covers = [
//   {
//     latitude: 25.44579,
//     longitude: 119.08243,
//   },
//   {
//     latitude: 26.44579,
//     longitude: 120.08243,
//   },
// ]
const styles = {
  marginLeft: '20rpx',
  width: '420rpx',
  height: '20px',
  lineHeight: '20px',
  background: '#fff',
  borderRadius: '50px',
}
const start = ref({
  startY: 0,
})

function handleTouchStart(event) {
  const touch = event.touches[0]
  start.value.startY = touch.pageY
}
function handleTouchMove(event) {
  const touch = event.touches[0]
  const defaultY = windowHeight - safeAreaInsets.bottom - 280
  const defaultTop = windowHeight - 630 + safeAreaInsets.bottom
  const y = touch.pageY > defaultY ? defaultY : touch.pageY < defaultTop ? defaultTop : touch.pageY
  coverTop.value = y < 130 ? 130 : y
}
const backBox = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
.energyStorage {
  &:deep(.uv-navbar) {
    font-size: 12px;
  }

  .mapCoverBottom {
    position: fixed;
    right: 0;
    left: 0;
    height: 100vh;
    padding: 0 40rpx 30rpx 10rpx;
    overflow-y: auto;
    background: #fff;
    border-radius: 40rpx 40rpx 0 0;
    box-shadow: 0rpx 2rpx 109rpx 0rpx rgb(43 43 43 / 26%);

    .mouseMove {
      position: relative;
      z-index: 2;
      height: 72rpx;
    }

    .tipsBox {
      position: absolute;
      top: 23rpx;
      left: 50%;
      z-index: 1;
      display: block;
      width: 80rpx;
      height: 8rpx;
      margin-left: -40rpx;
      background: #e2e7f7;
      border-radius: 4rpx;
    }

    .item {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40rpx 0 46rpx;
      margin-left: 30rpx;
      font-size: 24rpx;
      color: #354970;
      border: 3px solid #f0f3fa;
      border-radius: 20rpx;

      .image {
        width: 65rpx;
        height: 65rpx;
      }

      &:first-child {
        .image {
          width: 52rpx;
          height: 67rpx;
        }
      }
    }

    .listBox {
      height: 700rpx;
      overflow-y: auto;
    }

    .listItem {
      justify-content: space-between;
      padding: 44rpx 46rpx;
      font-size: 24rpx;
      color: #a3b0c9;
      border: 3px solid #f0f3fa;
      border-radius: 20rpx;

      .image {
        width: 64rpx;
        height: 64rpx;
      }
    }
  }

  .mapCoverDetail {
    position: fixed;
    right: 5%;
    bottom: 30rpx;
    left: 5%;
    padding: 40rpx;
    background: #fff;
    border-radius: 30rpx;
    box-shadow: 0rpx 2rpx 27rpx 0rpx rgb(43 43 43 / 26%);

    .close {
      position: absolute;
      top: 46rpx;
      right: 46rpx;
      width: 50rpx;
      height: 50rpx;

      .close1,
      .close2 {
        position: absolute;
        top: 0;
        left: 50%;
        width: 2px;
        height: 35rpx;
        background: #5b729f;
        transform: rotate(45deg);
      }

      .close2 {
        transform: rotate(-45deg);
      }
    }

    .title {
      font-size: 34rpx;
      color: #354970;
    }

    .tips {
      align-items: center;
      margin-top: 28rpx;
      font-size: 24rpx;
      color: #a3b0c9;
    }

    .image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 20rpx;
    }

    .btn {
      margin-top: 52rpx;
      line-height: 77rpx;
      color: #fff;
      text-align: center;
      background: linear-gradient(-33deg, #226cff, #329afb);
      border-radius: 39rpx;
      box-shadow: 0rpx 5rpx 8rpx 0rpx rgb(138 177 255 / 61%);
    }
  }
}

.map {
  width: 100vw;
  height: 100vh;
}
</style>
